import React, { Component } from "react";
import Checkerboard from "./components/Checkerboard";
import ControllBar from "./components/ControllBar";
import GridStatus from "./components/GridStatus";
import GameStatus from "./components/GameStatus";
import History from "./components/History";
import WinHistory from "./components/WinHistory";
import { observer } from "mobx-react";
import pageStore, { SudokuStore } from "./state";
import * as events from "./events";
import "./App.css";
import dayjs from "dayjs";
import Utils from "./utils";

interface IProps {
	pageStore: SudokuStore;
}

@observer
export class App extends Component<IProps> {
	componentDidMount(): void {
		const type: string = Utils.getUrlHash() || "4"; //获取url参数
		const { pageStore } = this.props;
		pageStore.setType(type);
	}
	render() {
		const {
			pageStore: {
				sudoku,
				controllBar,
				choosedGrid,
				isWin,
				history,
				startTime,
				endTime,
				winHistory,
				type,
				difficulty,
			},
		} = this.props;
		return (
			<div className="App">
				<div className="top">
					数独游戏{type}宫 难度{difficulty}
					<span className={isWin ? "color_red" : "color_green"}>
						{isWin ? "胜利" : "进行中"}
					</span>
					{sudoku && (
						<Checkerboard
							sudoku={sudoku}
							type={type}
							gridClick={events.gridClick.bind(this)}
						/>
					)}
					<ControllBar
						controllBar={controllBar}
						choosedGrid={choosedGrid}
						barClick={events.barClick.bind(this)}
					/>
				</div>
				<div className="bottom">
					<GameStatus start={events.startGame.bind(this)} />
					<div>开始时间：{dayjs(startTime).format("HH:mm:ss")}</div>
					<div>
						{endTime && "结束时间：" + dayjs(endTime).format("HH:mm:ss")}
					</div>
					{winHistory.length ? <WinHistory winHistory={winHistory} /> : null}
					{/* {history.length ? 
          <History 
            history={history} 
            stepClick={events.stepClick.bind(this)}
          /> : null}
          {choosedGrid && <GridStatus 
            choosedGrid={choosedGrid} 
            controllBar={controllBar} 
          />} */}
				</div>
			</div>
		);
	}
}

export default () => <App pageStore={pageStore} />;
